<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title>Product overview</title>

    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/animate.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/furniture-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/theme1.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/product.css"/>
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/go.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/footer.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/head.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/cart.css" />

    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->

</head>

<body>

<div class="page-loader"></div>

<div class="wrapper">

    <!--Use class "navbar-fixed" or "navbar-default" -->
    <!--If you use "navbar-fixed" it will be sticky menu on scroll (only for large screens)-->

    <!-- ======================== Navigation ======================== -->

    <nav class="navbar-fixed">

        <div class="container">

            <!-- ==========  Top navigation ========== -->

            <div class="navigation navigation-top clearfix">
                <ul>
                    <li class="nav-settings">
                        <a href="javascript:void(0);" class="nav-settings-value">简体中文</a>
                        <ul class="nav-settings-list">
                            <li>简体中文</li>
                            <li>English</li>
                        </ul>
                    </li>
                    <li><a href="javascript:void(0);" class="open-login"><i class="icon icon-user" id="btn-show-hide"></i></a></li>
                    <li><a href="javascript:void(0);" class="open-search"><i class="icon icon-magnifier"></i></a></li>
                    <li><a href="javascript:void(0);" class="open-cart"><i class="icon icon-cart"></i> <span id="pnum"></span></a></li>
                </ul>
            </div> <!--/navigation-top-->

            <!-- ==========  Main navigation ========== -->

            <div class="navigation navigation-main">

                <!-- Setup your logo here-->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot" class="logo"><img src="${pageContext.request.contextPath}/assets/images/logo.png" alt="" /></a>

                <!-- Mobile toggle menu -->

                <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>

                <!-- Convertible menu (mobile/desktop)-->

                <div class="floating-menu">

                    <!-- Mobile toggle menu trigger-->

                    <div class="close-menu-wrapper">
                        <span class="close-menu"><i class="icon icon-cross"></i></span>
                    </div>

                    <ul>
                        <li><a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot">首页</a></li>
                        <li><a href="product.jsp">产品详情</a></li>
                        <li><a href="products-grid.jsp">产品列表</a></li>
                    </ul>
                </div> <!--/floating-menu-->
            </div> <!--/navigation-main-->

            <!-- ==========  Search wrapper ========== -->
            <%-- 搜索--%>

            <div class="search-wrapper">

                <!-- Search form -->
                <input class="form-control" placeholder="Search..." />
                <button class="btn btn-main btn-search">Go!</button>

                <!-- Search results - live search -->
                <div class="search-results">
                    <div class="search-result-items">
                        <div class="title h4">Products <a href="#" class="btn btn-clean-dark btn-xs">View all</a></div>
                        <ul>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Green corner</span> <span class="category">Sofa</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Laura</span> <span class="category">Armchairs</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Nude</span> <span class="category">Dining tables</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Aurora</span> <span class="category">Nightstands</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Dining set</span> <span class="category">Kitchen</span></a></li>
                            <li><a href="#"><span class="id">42563</span> <span class="name">Seat chair</span> <span class="category">Bar sets</span></a></li>
                        </ul>
                    </div> <!--/search-result-items-->
                    <div class="search-result-items">
                        <div class="title h4">Blog <a href="#" class="btn btn-clean-dark btn-xs">View all</a></div>
                        <ul>
                            <li><a href="#"><span class="id">01 Jan</span> <span class="name">Creating the Perfect Gallery Wall </span> <span class="category">Interior ideas</span></a></li>
                            <li><a href="#"><span class="id">12 Jan</span> <span class="name">Making the Most Out of Your Kids Old Bedroom</span> <span class="category">Interior ideas</span></a></li>
                            <li><a href="#"><span class="id">28 Dec</span> <span class="name">Have a look at our new projects!</span> <span class="category">Modern design</span></a></li>
                            <li><a href="#"><span class="id">31 Sep</span> <span class="name">Decorating When You're Starting Out or Starting Over</span> <span class="category">Best of 2017</span></a></li>
                            <li><a href="#"><span class="id">22 Sep</span> <span class="name">The 3 Tricks that Quickly Became Rules</span> <span class="category">Tips for you</span></a></li>
                        </ul>
                    </div> <!--/search-result-items-->
                </div> <!--/search-results-->
            </div>

            <!-- ==========  Login wrapper ========== -->
            <%--登录--%>
            <%@ include file="login_part.jsp" %>
            <!-- ==========  Cart wrapper ========== -->

            <%@ include file="shopcar.jsp" %>
        </div> <!--/container-->
    </nav>

    <!-- ========================  Main header ======================== -->

    <section class="main-header" style="background-image:url(${pageContext.request.contextPath}/assets/images/gallery-2.jpg)">
        <header>
            <div class="container">
                <h1 class="h2 title">确认订单信息</h1>
                <ol class="breadcrumb breadcrumb-inverted">
                    <li><a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot"><span class="icon icon-home"></span></a></li>
                    <li><a class="active" href="submit.html">确认订单信息</a></li>
                </ol>
            </div>
        </header>
    </section>



    <div class="public_b">
        <form action="" method="post">
            <div class="w1200">

                <!--地址选择-->
                <div class="o_o_content">
                    <h2 class="part_h2">1&nbsp;地址选择</h2>
                    <%@ include file="address.jsp" %>
                    <div style="display: none;" class="addr_list" id="addr_list">
                        <ul>
                            <li class="addr_new">
                                <div class="btn_new_addr" nc_type="addr" id="add_addr">添加新地址</div>
                            </li>
                        </ul>
                    </div>
                    <!--商品-->
                    <div class="o_o_part o_o_part3">
                        <h2 class="part_h2">2&nbsp;商品清单<a class="a_return_car" href="${pageContext.request.contextPath}/GoodsServlet?method=ishot"> &lt; 返回首页</a></h2>
                        <div class="container_main">
                            <div class="cart_center">
                                <div id="carttop">
                                    <div style="width: 140px;">
                                        <input id="totaladd" type="checkbox" checked="checked"/>
                                        <span style="margin-left: 23px;"onselectstart="return false" >全选</span>
                                    </div>
                                    <span style="width: 300px;">商品信息</span>
                                    <span style="width: 180px;text-align: center;">单价</span>
                                    <span style="width: 170px;text-align: center;">数量</span>
                                    <div style="width: 150px;padding-right: 30px;display: flex;flex-direction: row-reverse;"><span>小计</span></div>
                                    <span style="padding-left: 31px;width: 129px;">操作</span>
                                </div>
                                <div id="cartcenter">
                                    <c:if test="${empty shopcar }">
                                        <h3 style="margin-bottom: 10px;margin-top: 20px;font-size: 18px">购物车空空如也,亲,请先去逛逛去吧~~~~~~~~~~~</h3>
                                    </c:if>
                                    <c:if test="${not empty shopcar}">
                                        <c:forEach  items="${shopcar }" var="ci">
                                            <div class="cartitem" value="${ci.ID }">
                                                <input class="addtoorder" value="${ci.ID}" type="checkbox" id="scid_${ci.ID}" checked="checked"></input>
                                                <img class="cartitemimg" src="${pageContext.request.contextPath }/${ci.pic}" />
                                                <div style="padding-left: 20px;width: 300px;">
                                                    <p class="cartitemname">${ci.goodsName}</p>
                                                <%--    <p class="cartitemattrs">尺码：${ci.size}，颜色：${ci.color}</p>--%>
                                                </div>
                                                <div style="width: 180px;text-align: center;" class="sa">
                                                    <span>￥</span><span class="cartitemprice">${ci.price}</span>
                                                </div>
                                                <div style="display:flex;width: 190px;justify-content: center;" class="ss">
                                                    <div class="counter">
                                                        <span class="minuscounter">➖</span>
                                                        <input class="count" maxlength="5" id="gynum" value="${ci.nums}"
                                                               onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/"
                                                               style="text-align: center;"
                                                               disabled="disabled" />
                                                        <span class="addcounter" onclick="bbb('${ci.nums}')" >➕</span>
                                                    </div>
                                                </div>
                                                <div style="width: 140px;text-align: center;color: #D4282D;font-size: 14px;margin-left: 20px;" class="se">
                                                    <span>￥</span><span class="cartitempriceall">${ci.nums*ci.price}</span>
                                                </div>
                                                <div style="padding-left: 15px;width: 98px;">
                                                    <p class="delete">删除</p>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </c:if>
                                </div>
                                <div id="cartbottom">
                                    <div style="width: 140px;">
                                        <input id="totalminus" type="checkbox"/>
                                        <span style="margin-left: 23px;"onselectstart="return false" >全选</span>
                                    </div>
                                    <span style="display:inline-block;margin-left: 0px;">已选</span>
                                    <span>（</span>
                                    <span id="haveselect">0</span>
                                    <span>）</span>
                                    <span style="width: 180px;text-align: center;"></span>
                                    <div style="flex: 1;"></div>
                                    <span style="width: 100px;text-align: center;">应付总额:</span>
                                    <span  style="font-size: 22px;color: #D4282D;">￥</span>
                                    <span id="sum"></span>
                                    <div id="toorder" onclick="order()"><span >下单</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--商品-->
                </div>
                <!--地址选择end-->
            </div>
        </form>
    </div>

    <!-- ================== Footer  ================== -->

    <%@ include file="foot.jsp" %>

</div>
<!--/wrapper-->
<!--JS files-->
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.owl.carousel.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.ion.rangeSlider.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.isotope.pkgd.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
</body>

</html>
<script>

    var path = '${pageContext.request.contextPath }';
    var total=0;
    $('input[id^=scid_]:checked').each(function () {
        var otr = $(this).parent();
        var price = parseInt(otr.find('.se').find('.cartitempriceall').text());
        total +=price ;
    })
    $('#sum').text(total);

   $('#totaladd').change(function () {
       var oScid = $('input[id^=scid_]');
       if ($(this).prop('checked')) {
           oScid.prop('checked', true);
       } else {
           oScid.prop('checked', false);
       }
       var totalprice = 0;
       $('input[id^=scid_]:checked').each(function () {
           var otr = $(this).parent();
           var price = parseInt(otr.find('.se').find('.cartitempriceall').text());
           totalprice +=price ;
       })
       $('#sum').text(totalprice);
   })

    $('input[id^=scid_]').change(function(){
        var totalprice = 0;
        //控制全选按钮是否勾选
        if($('input[id^=scid_]:not(:checked)').length == 0){
            $('#totaladd').prop('checked',true);
        }else{
            $('#totaladd').prop('checked',false);
        }
        //修改总金额
        $('input[id^=scid_]:checked').each(function(){
            var otr = $(this).parent();
            var price = parseInt(otr.find('.se').find('.cartitempriceall').text());
            totalprice +=price ;
        })
        $('#sum').text(totalprice);
    })


    $(".minuscounter").on('click',function () {
        var otr=$(this).parent();
        var c =parseInt(otr.find('.count').val()) ;
        if(c==0)
        {
            return false;
        }
        c=c-1;
        otr.find('.count').val(c);
        var sotr=otr.parent().parent().find('.sa').find('.cartitemprice');
        var oneprice=parseInt(sotr.text());
        var ssum=c*oneprice;
        var cotr=otr.parent().parent().find('.se').find('.cartitempriceall');
        cotr.text(ssum);
        var check=otr.parent().parent().find('.addtoorder').prop("checked");
        if(check)
        {
            var totalprice=parseInt($('#sum').text());
            totalprice-=oneprice;
            $('#sum').text(totalprice);
        }
    })

    $(".addcounter").on('click',function () {

         var otr=$(this).parent();
         var c =parseInt(otr.find('.count').val()) ;
         c=c+1;
         otr.find('.count').val(c);
        var sotr=otr.parent().parent().find('.sa').find('.cartitemprice');
        var oneprice=parseInt(sotr.text());
        var ssum=c*oneprice;
        var cotr=otr.parent().parent().find('.se').find('.cartitempriceall');
        cotr.text(ssum);
        var check=otr.parent().parent().find('.addtoorder').prop("checked");
        if(check)
        {
            var totalprice=parseInt($('#sum').text());
            totalprice+=oneprice;
            $('#sum').text(totalprice);
        }
    })
    /**
     * 删除单个商品
     */
    $(".delete").on('click', function () {
        $(this).parent().parent().remove();
        var check= $(this).parent().parent().find('.addtoorder').prop("checked");
        if(check) {
            var totalprice = parseInt($('#sum').text());
            var price = parseInt($(this).parent().parent().find('.se').find('.cartitempriceall').text());
            totalprice -= price;
            $('#sum').text(totalprice);
        }
    });

    function order() {

        var b=  $('em[class=yListrclickem]').find(".yuan").val();/*获得了订单地址*/
        var sum=$('#sum').text();

        var json = [];
        $('input[class=addtoorder]:checked').each(function () {
            var otr = $(this);
            var id = otr.val();

            /*商品的ID和地址的ID可能会重复*/
            var num = otr.parent().find('.count').val();


            var j = {};
            j.ID = id;
            j.num = num;
            json.push(j);
        });

        var af = JSON.stringify(json);
        console.log(af);
        /*JSON  传值方法*/
        window.location.href = path + '/DealServlet?method=pay&&addressID='+b+'&&sum='+sum+'&&jsondata=' + encodeURIComponent(af);

    }




</script>
